<template>
  <div class="container">
    <ActionBar
      @input-change="handleInputChange"
      @search-click="getRoleList"
      @insert-click="handleInsertClick"
      @edit-click="handleEditClick"
      @delete-click="handleDeleteClick"
      @setting-permission-click="handleSettingPermissionClick"
    />
    <Table :tableData="roleList" :loading="tableLoading" @selection-change="selectionChange" />
    <el-pagination
      class="pagination"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      :current-page="pageNum"
      :total="total"
      @size-change="handlePageSizeChange"
      @current-change="handlePageNumChange"
    ></el-pagination>
    <Diglog :title="title" :show.sync="dialogVisible" :data="role" @success="handleActionSuccess" />
    <RolePermissionDiglog
      :show.sync="rolePermissionDialogVisible"
      :data="role"
      @success="handleActionSuccess"
    />
  </div>
</template>

<script>
import ActionBar from './components/ActionBar'
import Table from './components/Table'
import Diglog from './components/Diglog'
import RolePermissionDiglog from './components/RolePermissionDiglog'
import RoleService from '../../../service/role'
import { loadingType } from '../../../common/js/constant'

export default {
  data() {
    return {
      title: '',
      keyword: '',
      role: {},
      roleList: [],
      dialogVisible: false,
      rolePermissionDialogVisible: false
    }
  },
  methods: {
    // 获取角色列表
    getRoleList() {
      const { keyword, pageNum, pageSize } = this
      const result = RoleService.getRolesByKeyword(
        keyword,
        pageNum,
        pageSize
      ).then(res => {
        const { pageNum, total, list } = res.data
        this.pageNum = pageNum
        this.total = total
        this.roleList = list
      })
      this.loadingAspect(result, loadingType.TABLE)
    },
    // 处理input改变事件
    handleInputChange(value) {
      this.keyword = value
    },
    // 处理添加按钮点击事件
    handleInsertClick() {
      this.title = '添加角色'
      this.role = null
      this.dialogVisible = true
    },
    // 处理编辑按钮点击事件
    handleEditClick() {
      if (this.selection.length === 0 || this.selection.length > 1) {
        this.$confirm('请选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.title = '编辑角色'
        // 深拷贝role防止引用传递
        this.role = JSON.parse(JSON.stringify(this.selection[0]))
        this.dialogVisible = true
      }
    },
    // 处理删除按钮点击事件
    handleDeleteClick() {
      if (this.selection.length < 1) {
        this.$confirm('请至少选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        this.$confirm('您确定删除该角色？', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        }).then(() => {
          let roleIds = []
          this.selection.forEach(item => roleIds.push(item.roleId))
          RoleService.deleteRoles(roleIds).then(res => {
            // 提示
            this.$message.success(res.message)
            // 刷新Table
            this.getRoleList()
          })
        })
      }
    },
    // 处理角色权限按钮点击事件
    handleSettingPermissionClick() {
      if (this.selection.length === 0 || this.selection.length > 1) {
        this.$confirm('请选择一条记录', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          type: 'warning'
        })
      } else {
        // 深拷贝role防止引用传递
        this.role = JSON.parse(JSON.stringify(this.selection[0]))
        this.rolePermissionDialogVisible = true
      }
    },
    // 处理操作成功事件
    handleActionSuccess(pageNum) {
      if (pageNum !== null) {
        this.pageNum = pageNum
      }
      this.getRoleList()
    },
    // 处理pageSize改变事件
    handlePageSizeChange(value) {
      this.pageSize = value
      this.getRoleList()
    },
    // 处理pageNum改变事件
    handlePageNumChange(value) {
      this.pageNum = value
      this.getRoleList()
    }
  },
  mounted() {
    this.getRoleList()
  },
  components: {
    ActionBar,
    Table,
    Diglog,
    RolePermissionDiglog
  }
}
</script>

<style lang="stylus" scoped>
.container
  width 100%
  height 100%
  padding 20px
  box-sizing border-box
  .pagination
    margin-top 20px
    text-align right
</style>
